<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>欢迎你，请先登陆！</title>
    <!--    网页格式清除-->
    <link href="../CSS/首页/empty.css" rel="stylesheet">

    <!--    导航栏的style  ul-top和li-top-->
    <link href="../CSS/首页/导航栏.css" rel="stylesheet">

    <!--    登录框-->
    <link href="../CSS/登录/背景.css" rel="stylesheet">
    <link href="../CSS/登录/登录框.css" rel="stylesheet">
    <script type="text/javascript" src="../static/jsp/lx.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../static/css/lx.css">
</head>
<body>
<!--导航栏-->
<div>
    <ul class="ul-top">
        <li class="li-top"><a style="text-decoration: none">欢迎光临，约Fun!</a></li>
        <li class="li-top"><a  style="text-decoration: none" href="1主页.html">首页</a></li>
        <!--    <li class="li-top"><a  href="#home">菜单</a></li>-->
        <!--    <li class="li-top"><a  href="#home">专题</a></li>-->
        <li class="li-top" style="float:right"><a href="3登录.html">登录</a></li>
        <li class="li-top" style="float:right"><a href="#about">收藏</a></li>
        <li class="li-top" style="float:right"><a href="5我的Fun桌.html">我的Fun桌</a></li>
    </ul>
</div>

<div>
    <div class="box-background">

    </div>
    <!--    登录块-->
    <div id="box">
        <!--        登录-->
        <div id="box-1">
            <h>登录</h>
        </div>
        <!--        用户密码区-->
        <div id="box-2">
            <div class="input_box">
                <div class="text" id="text-1">
                    <p>用户名</p>
                </div>
                <div class="box-b" id="box-b1">
                    <input id="uname" type="text" name="user" placeholder="请输入用户名">
                </div>
            </div>
            <div class="input_box">
                <div class="text" id="text-2">
                    <p>密码</p>
                </div>
                <div class="box-b" id="box-b2">
                    <input id="upass" type="password" name="psw" placeholder="请输入密码">
                </div>
            </div>
        </div>
        <!--        按钮-->
        <div id="box-3" >
            <div id="error_box"><br></div>
            <div class="input_box">
                <div id="denglu">
                    <button type="button" class="btn btn-primary" onclick="fnLogin()" style="width: 85px">登 录</button>&nbsp&nbsp&nbsp&nbsp
                </div>
                <div id="zhuce">
                    <a href="2注册.html"><input type="button" class="btn btn-info" style="width: 85px" name="regist" value="注 册"></a>
                </div>
            </div>
        </div>
    </div>
    <script>
        function fnLogin() {
            var oUname = document.getElementById("uname")
            var oUpass = document.getElementById("upass")
            var oError = document.getElementById("error_box")
            var isError = true;
            if (oUname.value.length > 20 || oUname.value.length < 6) {
                oError.innerHTML = "用户名请输入6-20位字符";
                isError = false;
                return;
            }else if((oUname.value.charCodeAt(0)>=48) && (oUname.value.charCodeAt(0)<=57)){
                oError.innerHTML = "首字符必须为字母";
                return;
            }else
                for(var i=0;i<oUname.value.charCodeAt(i);i++){
                if((oUname.value.charCodeAt(i)<48)||(oUname.value.charCodeAt(i)>57) && (oUname.value.charCodeAt(i)<97)||(oUname.value.charCodeAt(i)>122)){
                    oError.innerHTML = "必须为字母跟数字组成";
                    return;
                }
            }
            if (oUpass.value.length > 20 || oUpass.value.length < 6) {
                oError.innerHTML = "密码请输入6-20位字符"
                isError = false;
                return;
            }
            window.alert("登录成功")
            location.href='1主页登录了的.html';

            // 将用户信息存在 localstorage
            var user = {
                username: oUname.value,
                password: oUpass.value
            }
            console.log("user",user)
            localStorage.setItem("userInfo",JSON.stringify(user));
            console.log(localStorage.getItem("userInfo"))
            // // 跳转到首页
            window.location.href="1主页.html"
            // // 修改首页的登录按钮变成用户名 localstorage
            // echo "alert('登陆成功');location.href='admin.php';";


    }
    </script>
</div>
</body>
</html>